<template>
<div >
  <div class="top">
    <h4>Qian Miaomiao</h4>
    <h5>人生而自由，却无往不在枷锁之中</h5>
    <span class="iconfont down" @click="goDown">&#xe648;</span>
    </div>
  <div :class= "bgc" id="here">
        <div class="w1">
            <ContentLeft/>
            <ContentRight/>
          </div>
           <!-- 侧边栏 -->
    <div class="slider-bar" v-show="isShow">
        <el-button  class="rotate iconfont" @click="change1" title="浅色模式">&#xe650;</el-button>
        <el-button  class="rotate iconfont" @click="change2" title="深色模式">&#xe71e;</el-button>
        <el-button  class="rotate iconfont" @click="change3" title="彩色模式">&#xe679;</el-button>
    </div>
     <el-backtop :bottom="100">
    <div
      style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }">
      UP
      </div>
  </el-backtop>  
     </div>
   <Test/>
  </div>
</template>

<script>
import ContentLeft from './ContentLeft.vue';
import ContentRight from './ContentRight.vue';
import axios from 'axios';
import Test from '@/components/test.vue';
export default {
    name: "Home",
    data() {
        return {
            bgc: "bgc1",
            isShow:false,
            oldScrollTop:0,
        };
    },
    components: { ContentLeft, ContentRight, Test },
    methods: {
        goDown() {
            document.querySelector("#here").scrollIntoView({ block: "start", behavior: "smooth" });
        },
        change1() {
            this.bgc = "bgc1";
            this.$message({
              message:"你已进入浅色模式",
              duration:2000,
              type:"warning" ,
              offset:100,
            })
        },
        change2() {
            this.bgc = "bgc2";
            this.$message({
              message:"你已进入深色模式",
              duration:2000,
              type:"warning",
              offset:100 
            })
        },
        change3() {
            this.bgc = "bgc3";
            this.$message({
              message:"你已进入彩色色模式",
              duration:2000,
              type:"warning" ,
              offset:100
            })
        },
        windowScrollListener(){
          setTimeout(() => {
              var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
              if(scrollTop >= 240){
                this.isShow = true
              }
              if(scrollTop < 240){
                this.isShow = false
              }
          }, 440);
        },
        
    },   
    created(){
      window.addEventListener('scroll',this.windowScrollListener)
    },
    // mounted(){
    //   this.$store.dispatch('getUserInfo')
    // },
    destroyed(){
      window.removeEventListener('scroll',this.windowScrollListener)
    }
}
</script>

<style scoped>
    .top {
  height: 715px;
  background-image: url("@/assets/images/1.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  padding-top: 240px;
}
.top h4 {
  text-align: center;
  font-size: 50px;
  font-style: oblique;
  font-weight: 400;
  /* color: black; */
}

.top h5 {
  width: 550px;
  height: 50px;
  margin-left: 450px;
  margin-top: 10px;
  font-weight: 500;
  font-size: 35px;
  opacity: 0;
  transform: translate(-150px, 0) scale(.5);
  animation: leftRight 3s infinite;
  /* color: black; */
}

@keyframes leftRight {
  40% {
    transform: translate(30px, 0) scale(.7);
    opacity: 1;
    color: #000;
  }

  60% {
    color: #fff;
  }

  80% {
    transform: translate(0) scale(2);
    opacity: 0;
  }

  100% {
    transform: translate(0) scale(1);
    opacity: 1;
  }

}

.top .down {
  display: block;
  margin-top: 240px;
  text-align: center;
  font-size: 40px;
  cursor: pointer;
  animation: bounce-down 1.8s linear infinite;
}

@keyframes bounce-down {
  0%{opacity: 0.9;}
   10%{opacity: 0.7;}
   100%{opacity: 0.3;}
  25% {
    -webkit-transform: translateY(-10px);
  }

  50%,
  100% {
    -webkit-transform: translateY(0);
  }

  75% {
    -webkit-transform: translateY(10px);
  }
}
 .bgc1 {
  height: 3660px;
  background-image: url("@/assets/images/15.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
 .bgc2 {
  height: 2660px;
  background-image: url("@/assets/images/16.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
.bgc2{
  color: white !important;
}
.bgc2 a{
  color: white !important;
}
 .bgc3 {
  height: 2660px;
  background-image: url("@/assets/images/14.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
.w1 {
  width: 1150px;
  margin: 0 auto;
}



/* 侧边栏 */
.slider-bar{
  position: fixed;
  bottom: 140px;
  right: 35px;
  /* text-align: center; */
}
.rotate{
  /* vertical-align: middle; */
  /* text-align: center; */
  /* font-size: 45px; */
  /* border: 1px solid rgb(183, 228, 246); */
  background-color: rgb(189, 232, 249);
  color: white;
  border-radius: 30%;
  animation: move-test 1.2s linear infinite;
  -webkit-animation: move-tes 1.2s linear infinite;
  /* display: inline-block; */
  cursor: pointer;
}
/* @keyframes move-tes{
  0%{
      transform: rotate(0deg);
  }
  100%{
      transform: rotate(360deg);
  }
} */
.slider-bar .iconfont{
  width: 50px;
  height: 50px;
  /* padding-left: -80px; */
  text-align: center;
  /* padding: -15px; */
  font-size: 25px;
  border: 1px solid rgb(183, 230, 249);
  background-color: rgb(180, 226, 244);
  color: white;
  border-radius: 30%;
  margin-bottom: 5px;
  cursor: pointer;
  display: block;
  margin-left: -30px;
}
.slider-bar .iconfont:hover{
  background-color: skyblue;
}

</style>